<template>
	<view>
		<view>
			<u-popup v-model="showPop" mode="center" border-radius="20" width="60%" height="290" :mask-close-able="false">
				<view style="display: flex;flex-direction: row;">
					<image src="../../../static/images/navigation/t.png"
						style="height: 150rpx;width: 150rpx;margin-top: 30rpx;"></image>
					<text
						style="margin-top: 40rpx;font-family: my-font;width: 280rpx;color: red;font-size: 30rpx;">:{{tokenData.message}}!点击确定跳转登录页</text>
				</view>
				<view style="display: flex;flex-direction: row;margin-top: 20rpx;">
					<u-button class="custom-style1" shape="circle" @click="Login">确定</u-button>
				</view>
			</u-popup>
		</view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="ti_navba">
			<u-navbar :is-back="false" title="">
				<view class="slot-wrap">
					<image src="../../../static/images/navigation/b5 (2).png"></image>
					<view style="font-size: 36rpx;">消息列表</view>
					<view>
						<image src="../../../static/images/navigation/b1 (1).png" @click="clickFriends"></image>
						<u-badge :is-dot="true" type="error" class="badge-d"></u-badge>
					</view>
					<image src="../../../static/images/navigation/b1 (2).png" @click="clickAddFriends"></image>
				</view>
			</u-navbar>
		</view>
		<!-- <MessagesList></MessagesList> -->
		<u-swipe-action :show="show" :index="index" v-for="(item, index) in flowList"
			@click="click" @open="open" :options="options">
			<view v-if="item.fromId == myId">
				<view class="item u-border-bottom" @click="sendUser(item.toId, item.toIcon, item.toName)">
					<view style="width: 110rpx;">
						<u-avatar mode="circle" :src="$url+item.toIcon">
						</u-avatar>
						<u-badge type="error" :count="item.num" class="badge"></u-badge>
					</view>
					<view class="title-wrap">
						<view class="title_v">
							<text class="title1 u-line-2">{{ item.toName }}</text>
							<text class="title1 u-line-2">{{ item.sendTime }}</text>
						</view>
						<text class="title2 u-line-2">{{ item.content }}</text>
					</view>
				</view>
			</view>
			<view v-if="item.fromId != myId">
				<view class="item u-border-bottom" @click="sendUser(item.fromId, item.fromIcon, item.fromName)">
					<view style="width: 110rpx;">
						<u-avatar mode="circle" :src="$url+item.fromIcon">
						</u-avatar>
						<u-badge type="error" :count="item.num" class="badge"></u-badge>
					</view>
					<view class="title-wrap">
						<view class="title_v">
							<text class="title1 u-line-2">{{ item.fromName }}</text>
							<text class="title1 u-line-2">{{ item.sendTime }}</text> 
						</view>
						<text class="title2 u-line-2">{{ item.content }}</text>
					</view>
				</view>
			</view>
		</u-swipe-action>

	</view>
</template>

<script>
	import wsRequest from "@/util/websocket.js"
	export default {

		data() {
			return {
				showPop: false,
				show: false,
				myId: uni.getStorageSync('uuId'),
				tokenData: {},
				flowList: [],
				list: [],
				disabled: false,
				btnWidth: 180,
				options: [{
						text: '置顶',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		methods: {
			click(index, index1) {
				if (index1 == 1) {
					let fromId = this.flowList[index].fromId;
					let toId = this.flowList[index].toId;
					let myId = this.myId;
					if(myId == fromId){
						uni.removeStorageSync('my'+myId+'toUser'+toId);
					}
					if(myId == toId){
						uni.removeStorageSync('my'+myId+'toUser'+fromId); 
					}
					this.flowList.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.flowList[index].show = false;
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.flowList[index].show = true;
				this.flowList.map((val, idx) => {
					if (index != idx) this.flowList[idx].show = false;
				})
			},
			clickAddFriends() {
				uni.navigateTo({
					url: "/pages/userCate/addFriends/addFriends"
				})
			},
			clickFriends() {
				uni.navigateTo({
					url: "/pages/userCate/addFriends/friends"
				})
			},
			Login() { 
				uni.navigateTo({
					url: "/pages/index/login"
				})
			},
			sendUser(uuId,icon,nickname) {
				let item = {
					uuId:uuId,
					icon:icon,
					nickname:nickname,
				}
				uni.navigateTo({
					url: "/pages/userCate/userComm/privateChat?user="+encodeURIComponent(JSON.stringify(item)),
				})
			},
			addRandomData(state) {
				console.log(JSON.stringify(this.list));
				for (let i = 0; i < this.list.length; i++) {
					let fromId = this.list[i].fromId;
					let toId = this.list[i].toId; 
					let myId = this.myId;
					let k1 = this.list[i].sendTime.indexOf('-')+1;
					let k2 = this.list[i].sendTime.lastIndexOf(':');
					this.list[i].sendTime=this.list[i].sendTime.substring(k1,k2);
					if(myId === fromId){
						//用户消息是否存在于列表
						var p = this.flowList.find(function(curr) {
							return curr.uuId === toId
						})
						if(p != null){
							if(state == 200){
								p.num += 1;
							}
							if(state == 100){
								p.num = 0;
							}
							p.content = this.list[i].content;
							p.sendTime = this.list[i].sendTime;
						}else{
							this.$set(this.list[i], 'uuId', toId);
							if(state == 200){
								this.$set(this.list[i], 'num', 1);
							}
							if(state == 100){
								this.$set(this.list[i], 'num', 0);
							}
							let item = this.list[i];
							this.flowList.push(item); 
						} 
					}
					if(myId === toId){
						var p = this.flowList.find(function(curr) {
							return curr.uuId === fromId 
						})
						if(p != null){
							if(state == 200){
								p.num += 1;
							}
							if(state == 100){
								p.num = 0;
							}
							p.content = this.list[i].content;
							p.sendTime = this.list[i].sendTime;
						}else{
							this.$set(this.list[i], 'uuId', fromId);
							if(state == 200){
								this.$set(this.list[i], 'num', 1);
							}
							if(state == 100){
								this.$set(this.list[i], 'num', 0);
							}
							let item = this.list[i];
							this.flowList.push(item);
						}
					}
				} 
				uni.setStorageSync('list'+this.myId,this.flowList);
				this.list.length = 0;
			}, 
			tokenRequest() {
				this.$sendRequest({
					url: "/users/token",
					method: 'POST',
					success: (res) => {
						this.tokenData = res.data
						if (res.data.status == 500) {
							this.showPop = true
						}
						if (res.data.status == 401) {
							this.showPop = true
						}
						if (res.data.code == 200) {
							
							// this.ws = new wsRequest(this.$wsUrl + '/WebSocket/' + uni.getStorageSync('uuId'),5000)
							// this.ws && this.ws.closeSocket();

							// this.ws = new WS(this.$wsUrl + '/WebSocket/' + uni.getStorageSync('uuId') + '/chat') //接口地址URL
							// this.ws.getWebSocketMsg(data => {
							// 	const dataJson = data;

							// 	if (typeof(dataJson) == "object") { 
							// 		console.log("wsObject", dataJson);
							// 	} else {
							// 		console.log(dataJson); 
							// 	}
							// });	
						}
					}
				});
			}
		},
		onShow() {
			this.showPop = false
			//消息数组长度不等于零
			if(getApp().globalData.addUserList.length != 0 || getApp().globalData.chatList.length != 0){
				uni.showTabBarRedDot({ //显示
					index: 3, //tabbar下标
				})
			}else{
				uni.hideTabBarRedDot({ //隐藏红点
					index: 3 //tabbar下标
				})
			}
			var icon = plus.nativeObj.View.getViewById("icon");
			if (icon) {
				setTimeout(function() {
					icon.show();
				}, 100)
			}
			// uni.hideTabBarRedDot({ //隐藏红点
			// 	index: 3 //tabbar下标
			// })
		},
		onLoad() {
			this.tokenRequest()
			// uni.removeStorageSync('list'+this.myId);
			this.myId = uni.getStorageSync('uuId');
			var list = uni.getStorageSync('list'+this.myId);
			if(list.length != 0){
				this.flowList = list;
			} 
			uni.$on('listNum',(res) => {
				if (res != null) {
					var p = this.flowList.find(function(curr) {
						return curr.uuId === res
					})
					if(p != null){
						p.num = 0;
					}
				}
			})
			uni.$on('chatList', (res) => {
				if (res != null) {
					this.list.push(JSON.parse(res));
					this.addRandomData(200); 
				}
			})
			uni.$on('oneChat', (res) => {
				if (res != null) {
					this.list.push(JSON.parse(res));
					this.addRandomData(100); 
				}
			})
		},
		onUnload(){
			
		},
	}
</script>

<style>
	.ti_navba {
		height: 85rpx;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
	}

	.slot-wrap image:first-child {
		width: 50rpx;
		height: 50rpx;
		margin-left: 30rpx;
		margin-right: 240rpx;
	}

	.slot-wrap view:nth-child(3) {
		width: 50rpx;
		height: 50rpx;
		margin-left: 130rpx;
	}

	.slot-wrap image:nth-child(4) {
		margin-left: 40rpx;
		width: 60rpx;
		height: 60rpx;
	}
</style>

<style lang="scss" scoped>
	.item {
		display: flex;
		padding: 20rpx;
	}

	.item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title2 {
		margin-top: 10rpx;
		width: 600rpx;
		text-align: left;
		display: -webkit-box; /*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden; 
		font-size: 24rpx;
		color: $u-content-color;
	}

	.title_v {
		display: flex;
		justify-content: space-between;
	}

	.title_v .title1:first-child {
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 300rpx;
	}

	.title_v .title1:nth-child(2) {
		font-size: 28rpx;
		color: #9A9A9A;
	}
</style>

<style scoped>
	.custom-style1 {
		margin-top: 20rpx;
		background-color: #4b5ad9;
		color: white;
		font-size: 24rpx;
		width: 35%;
		height: 45rpx;
	}
	.badge-d{
		margin-top: -10rpx;
		left: 665rpx;
	}
	.badge {
		width: 30rpx;
		left: 90rpx;
	}
</style>
